<template>
    <div class="userCenter">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="个人信息" name="first">
              <div class="content">
                <span>【 个 人 信 息 】</span>
              <div style="display: flex;flex-direction: row;padding: 20px;">
                <div>
                  <el-avatar shape="square" :size="100" :fit="fit" :src="userinfo.avatar"></el-avatar>
                  <p style="text-align: center;padding:10px 0;">{{ userinfo['real_name'] }}</p>
                </div>
                <ul style="margin-left: 20px;flex: 1;">
                  <li v-for="(item,index) in loginuserInfo" :key="index" style="padding:9px 0;display: flex;flex-direction: row;">
                    <span style="display: inline-block;width:65px;text-align: right;">{{ item.key }}</span>：
                    <span style="word-wrap: break-word;word-break:break-all;font-size: 10px;flex: 1;color: #999;">{{ item.val }}</span>
                  </li>
                </ul>
              </div>  </div>
            </el-tab-pane>
            <el-tab-pane label="密码修改" name="second">
              <div class="content">
                <span>【 修 改 密 码 】</span>
                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
                  <el-form-item label="原始密码" prop="orig_password">
                    <el-input type="password" v-model.number="ruleForm.orig_password"></el-input>
                  </el-form-item>
                  <el-form-item label="新密码" prop="new_password">
                    <el-input type="password" v-model="ruleForm.new_password" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item label="确认密码" prop="affirm_password">
                    <el-input type="password" v-model="ruleForm.affirm_password" autocomplete="off"></el-input>
                  </el-form-item>
                  <el-form-item >
                    <div style="display: flex;flex-direction: row;justify-content: space-between;width: 100%;">
                      <el-button type="primary" @click="submitForm('ruleForm')">修改</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </div>
                  </el-form-item>
                </el-form>
              </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>


<script> 
 import { userPasswordEdit } from '@/api/home_'
 import htmixin from '@/mixins/htmixin.js'
export default {
  mixins: [htmixin],
  data(){
    var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('原始密码不能为空'));
        }
        callback();
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入新密码'));
        } else {
          if (this.ruleForm.affirm_password !== '') {
            this.$refs.ruleForm.validateField('affirm_password');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入确认密码'));
        } else if (value !== this.ruleForm.new_password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
    return{
        numberValidateForm: {
          user_id: ''
        },
        fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
        activeName: 'first',
        loginuserInfo:[],
        userinfo:null,
        ruleForm: {
          new_password: '',
          affirm_password: '',
          orig_password: ''
        },
        rules: {
          new_password: [
            {required: true, validator: validatePass, trigger: 'blur' }
          ],
          affirm_password: [
            {required: true, validator: validatePass2, trigger: 'blur' }
          ],
          orig_password: [
            {required: true, validator: checkAge, trigger: 'blur' }
          ]
        }
    }
  },
  mounted(){
    this.$nextTick(()=>{
    })
  },
  created(){
    this.getUserInfo()
  },
  methods: {
    getUserInfo(){
      this.loginuserInfo = []
      this.userinfo = JSON.parse(sessionStorage.getItem('userInfo'))
      this.loginuserInfo.push({
        key:'登录账号',
        val:this.userinfo['username']
      })
      this.loginuserInfo.push({
        key:'用户名',
        val:this.userinfo['name']
      })
      
    },
    handleClick(){
      
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          formName=='ruleForm'?this.modifyPass(formName):this.resetPass(formName)
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    modifyPass(v){
      userPasswordEdit(this.ruleForm).then(res=>{
        if(res.code==200){
          this.resetForm(v)
        }
      })
    },
    resetPass(v){
      // userPasswordReset(this.numberValidateForm).then(res=>{
      //   if(res.code==200){
      //     this.resetForm(v)
      //     this.$message.success(res.msg)
      //   }else{
      //     this.$message.error(res.msg)
      //   }
      // })
    }
  }
}
</script>

<style lang="scss" scoped>
.content{
    border: 1px solid #dcdfe6;
    padding:50px 20px;
    border-radius: 4px;
    position: relative;
    margin: 10px 0px;
    width: 30%;
    // background: #f2f5f8;
    >span{
        position: absolute;
        top: -22px;
        left: 20px;
        background: #fff;
        padding: 10px;
        font-weight: bold;
    }
}
  .userCenter{
    background:#fff;
    padding:20px;
  }
  ul,li{
    list-style: none;
  }
  .el-input{
    // width:20%;
  }
  .el-form{
    // width: 25%;
    .el-button{
      width:46%;
    }
  }
</style>
